<!--
 * @Description: 选择组织
 * @Author: chenju
 * @Date: 2022-03-22 17:50:42
 * @LastEditors: chenju
 * @LastEditTime: 2023-01-18 17:32:05
-->
<template>
  <el-select
    class="g-select-organization"
    v-model="localValue"
    placeholder="请输入后选择"
    filterable
    :loading="loading"
    :clearable="props.clearable"
    remote
    :remote-method="remoteMethod"
    @change="handleChange"
  >
    <el-option
      v-for="item in optionsData"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script lang="ts">
export default {
  name: 'GSelectOrganization'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, onMounted } from 'vue';
import {
  getOrganizationList,
  getCurrentOrganizationList,
  getChildByCodeList
} from '@/apis/common/common';
import type { GetOrganizationListResult } from '@/apis/common/model/commonModel';

export interface GSelectOrganizationOptionItem {
  value: string;
  label: string;
  item: GetOrganizationListResult[number];
}

interface GSelectOrganizationProps {
  value: string;
  // parentOrganizationCode: string;
  // 是否是当前用户的组织
  isCurrent: boolean;
  // 是否可以清除
  clearable?: boolean;
}
const props = withDefaults(defineProps<GSelectOrganizationProps>(), {
  isCurrent: false,
  clearable: true
});
const emit = defineEmits(['update:value', 'change']);

const localValue = computed({
  get: () => {
    return props.value;
  },
  set: val => {
    emit('update:value', val);
  }
});

const optionsData = ref<GSelectOrganizationOptionItem[]>([]);
const options = ref<GSelectOrganizationOptionItem[]>([]);
const options1 = ref<GSelectOrganizationOptionItem[]>([]);
const loading = ref(false);

function handleChange(value: string) {
  const item = optionsData.value.find(n => n.value === value);
  console.log('handleChange', value, item);
  emit('change', value, item);
}
const remoteMethod = (query: string) => {
  if (!props.isCurrent) {
    if (query) {
      optionsData.value = options1.value.filter(item => item.label.search(query) != -1);
      return;
    }
    optionsData.value = options.value;
  } else {
    optionsData.value = options.value.filter(item => item.label.search(query) != -1);
  }
};

onMounted(() => {
  if (!props.isCurrent) {
    getOrganizationList().then(res => {
      console.log('res', res);
      options1.value = res.map(item => {
        return {
          value: item.organizationCode,
          label: item.organizationName,
          item
        };
      });
    });
    // NOTE 去掉传参
    getChildByCodeList().then(res => {
      console.log('res', res);
      options.value = res.map(item => {
        return {
          value: item.organizationCode,
          label: item.organizationName,
          item
        };
      });
      optionsData.value = options.value;
    });
  } else {
    getCurrentOrganizationList().then(res => {
      console.log('res', res);
      options.value = res.map(item => {
        return {
          value: item.organizationCode,
          label: item.organizationName,
          item
        };
      });
      optionsData.value = options.value;
      if (options.value?.length === 1) {
        localValue.value = options.value[0].value;
        emit('change', options.value[0].value, options.value[0]);
      }
    });
  }
});
</script>
<style lang="scss" scoped>
.g-select-organization {
  width: 100%;
}
</style>
